<template>
  <el-row>
    <el-row>
      <white-board>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>知识点</el-breadcrumb-item>
        </el-breadcrumb>
      </white-board>
    </el-row>

    <el-row>
      <el-form ref="searchForm" :model="searchForm">
        <search-white-board :show-more="true" @search="list">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="3"><label class="search-label">年级分类</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.dictKey" placeholder="请选择年级分类" clearable></el-input>
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">年级</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.code" placeholder="请选择年级" clearable></el-input>
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">学科</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.code" placeholder="请选择学科" clearable></el-input>
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row style="line-height: 40px; text-align: right;">
          <el-col :span="6" :offset="18" style="text-align: right;">
            <el-button icon="el-icon-plus" type="success" plain @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>

        <el-row style="padding: 10px 0px;">
          <el-table :data="tableData" row-key="id" lazy :load="load" ref="ttable" @row-click="rowClick" style="width: 100%;" highlight-current-row stripe>
            <el-table-column prop="id" label="标识" width="180"></el-table-column>
            <el-table-column prop="parentId" label="父级标识" width="150"></el-table-column>
            <el-table-column prop="dictKey" label="字典唯一标识" width="200"></el-table-column>
            <el-table-column prop="code" label="字典编码"  width="100"></el-table-column>
            <el-table-column prop="value" label="字典值"></el-table-column>
            <el-table-column prop="attr" label="拓展字段"></el-table-column>
            <el-table-column prop="remarks" label="备注"></el-table-column>
            <el-table-column label="创建" width="135">
              <template slot-scope="scope">
                <div>{{scope.row.createdBy}}</div>
                <div>{{scope.row.createDate}}</div>
              </template>
            </el-table-column>
            <el-table-column label="更新" width="135">
              <template slot-scope="scope">
                <div>{{scope.row.lastModifiedBy}}</div>
                <div>{{scope.row.lastModifiedDate}}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="danger" plain @click="handleDel(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </white-board>
    </el-row>

    <el-dialog :visible.sync="dialogVisible" ref="form">
      <el-divider></el-divider>
      <label slot="title" style="float: left;">{{dialogTitle}}</label>

      <el-row>
        <el-col :span="18" :offset="3">
          <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
            <el-form-item label="标识" prop="id" hidden="hidden">
              <el-input v-model.trim="form.id" v-bind:disabled="form.id !== ''" hidden="hidden" clearable></el-input>
            </el-form-item>
            <el-form-item label="父级标识" prop="parentId" hidden="hidden">
              <el-input v-model.trim="form.parentId" placeholder="请输入父级标识" clearable></el-input>
            </el-form-item>
            <el-form-item label="唯一标识" prop="dictKey">
              <el-input v-model.trim="form.dictKey" placeholder="字典唯一标识" clearable></el-input>
            </el-form-item>
            <el-form-item label="字典编码" prop="code">
              <el-input v-model.trim="form.code" placeholder="字典编码" clearable></el-input>
            </el-form-item>
            <el-form-item label="字典值" prop="value">
              <el-input v-model.trim="form.value" placeholder="字典值" clearable></el-input>
            </el-form-item>
            <el-form-item label="拓展字段">
              <el-input v-model.trim="form.attr" placeholder="拓展字段" clearable></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model.trim="form.remarks" placeholder="备注" clearable></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort" >
              <el-input v-model.trim="form.sort" placeholder="排序" type="number" clearable></el-input>
            </el-form-item>
          </el-form>

        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider></el-divider>
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleSave" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
  import dataDictionaryApi from "@/api/dataDictionaryApi"

  export default {
    name: 'dataDict',
    components: {
    },
    data () {
      return {
        defaultProps: {
          label: 'name',
          children: 'child',
        },
        searchForm: {
          dictKey: '', // 字典唯一标识
          code: '', // 字典编码
          start: 1,
          limit: 10
        },
        tableData: [],
        uploadData: {
          tree: null,
          treeNode: null,
          resolve: null
        },

        dialogTitle: '',
        dialogVisible: false,
        dialogdelVisible: false,
        currentSelectRow: {}, // 当前选中行
        form: {
          id: '',
          parentId: '',
          dictKey: '',
          code: '',
          value: '',
          attr: '',
          remarks: '',
          sort: ''
        },
        formRules: {
          dictKey: [{required: true, message: '请输入字典唯一标识', trigger: 'blur'}],
          code: [{required: true, message: '请输入字典编码', trigger: 'blur'}],
          value: [{required: true, message: '请输入字典值', trigger: 'blur'}],
        }
      }
    },
    mounted () {
      this.list()
    },
    methods: {
      filterNode (value, data) {
        if (!value) {
          return true
        }

        return data.name.indexOf(value) !== -1
      },
      list () {
        this.currentSelectRow = {}
        this.tableData = []
        dataDictionaryApi.page(this.searchForm).then(data => {
          this.total = data.total
          data.data.forEach(item => {
            item.hasChildren = []
          })
          this.tableData = data.data
        })
      },
      rowClick (row, event, column) {
        this.currentSelectRow = row
      },
      handleAdd () {
        /* 重置表单 */
        this.form['id'] = ''
        this.form['parentId'] = this.currentSelectRow['id']
        this.form['dictKey'] = ''
        this.form['code'] = ''
        this.form['value'] = ''
        this.form['attr'] = ''
        this.form['remarks'] = ''
        this.form['sort'] = ''
        this.dialogTitle = '新增'
        this.dialogVisible = true
      },
      handleEdit (index,row) {
        this.form['id'] = row.id
        this.form['parentId'] = row.parentId
        this.form['dictKey'] = row.dictKey
        this.form['code'] = row.code
        this.form['value'] = row.value
        this.form['attr'] = row.attr
        this.form['remarks'] =row.remark
        this.form['sort'] = row.sort
        this.dialogTitle = '编辑'
        this.dialogVisible = true
      },
      handleDel (index,row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dataDictionaryApi.deleteDataDictPoint(row.id).then(data => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })

            this.list()
            this.load(this.uploadData.tree, this.uploadData.treeNode, this.uploadData.resolve)
          })
        })
      },
      load(tree, treeNode, resolve) {
        this.uploadData.tree = tree
        this.uploadData.treeNode = treeNode
        this.uploadData.resolve = resolve
        let value = tree.id

        dataDictionaryApi.findDataDictById(value).then(data => {
          data.forEach(item => {
            //判断是否有子节点
            if (item.size > 0) {
              item.hasChildren = []
            }
          })

          resolve(data)
        })
      },
      handleSave () {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return
          }

          dataDictionaryApi.saveOrUpdate(this.form).then(data => {
            this.dialogVisible = false
            this.$refs['form'].resetFields()
            this.list()
          })
        })
      }
    }
  }
</script>

<style scoped>
</style>
